<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>&lt;o:outputLabel&gt;</code> automatically sets the <code>label</code> attribute of the input component
			identified by its "for" attribute with the value of the <code>&lt;o:outputLabel&gt;</code>. This way there's
			no need to duplicate the very same label into the <code>label</code> attribute of the input component. 
			After submitting the form without having entered a value, a validation message is posted that should contain
			the label printed before the input instead of some generated ID.
		</p>
		<p>
			Submit the following forms without entering anything to see it.
		</p>
		<p>
			Note that PrimeFaces has implemented the same idea later in its new version 3.3 
			<a href="http://www.primefaces.org/showcase/ui/outputLabel.jsf"><code>&lt;p:outputLabel&gt;</code></a>,
			so if you happen to use PrimeFaces already, you may want to use it instead. 
			It's however known to have a problem when used inside repeater components.
		</p>
	</ui:define>

	<ui:define name="demo">
		<h3>With standard <code>h:outputLabel</code></h3>
		<h:form>
			<h:panelGrid columns="3">
				<h:outputLabel for="input" value="Foo" />
				<h:inputText id="input" required="true" />
				<h:message for="input" />

				<h:panelGroup />
				<h:commandButton value="Submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:panelGroup>
					<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
				</h:panelGroup>
			</h:panelGrid>
		</h:form>

		<hr />
		
		<h3>With OmniFaces <code>o:outputLabel</code></h3>
		<h:form>
			<h:panelGrid columns="3">
				<o:outputLabel for="input" value="Foo" />
				<h:inputText id="input" required="true" />
				<h:message for="input" />

				<h:panelGroup />
				<h:commandButton value="Submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:panelGroup>
					<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
				</h:panelGroup>
			</h:panelGrid>
		</h:form>

		<hr />
		
		<h3>Dynamic <code>o:outputLabel</code></h3>
		<h:form>
			<h:panelGrid columns="3">
				<o:outputLabel for="input" value="#{now.toString()}" />
				<h:inputText id="input" required="true" />
				<h:message for="input" />

				<h:panelGroup />
				<h:commandButton value="Submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:panelGroup>
					<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
				</h:panelGroup>
			</h:panelGrid>
		</h:form>
	</ui:define>
</ui:composition>